<template>
  <a-modal
    :width="800"
    v-model="visible"
    :title="title"
    @ok="handleOk"
    okText="确定"
    cancelText="取消"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <h2>名称：{{ name }}</h2>
    <div>
      <span>创建时间 : {{ creation_timestamp }}</span>
      <span style="margin-left: 50px">最后修改时间 : {{ last_updated_timestamp }}</span>
    </div>
    <div class="info_wrapper">
      <div class="description">
        <h3>描述</h3>
        <div v-if="!isEditingDesc">
          <span>{{ description || '无' }}</span>
          <a-button type="link" @click="handleEditDesc">编辑</a-button>
        </div>
        <div v-else>
          <a-textarea
            v-model="editingDesc"
            :rows="4"
            style="margin-bottom: 8px"
          />
          <div>
            <a-button type="primary" @click="handleSaveDesc" style="margin-right: 8px">保存</a-button>
            <a-button @click="handleCancelDesc">取消</a-button>
          </div>
        </div>
      </div>
      <div class="tags">
        <h3>标签</h3>
        <a-table
          style="margin-bottom: 16px"
          class="custom-table"
          :columns="columns"
          :data-source="tags"
          :pagination="false"
        >
          <template slot="value" slot-scope="text, record">
            <span v-if="!record.isEditing">{{ text }}</span>
            <a-input style="width: 200px" v-else v-model="record.editValue" />
          </template>
          <template slot="action" slot-scope="text, record">
            <span v-if="!record.isEditing">
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a>删除</a>
            </span>
            <span v-else>
              <a @click="handleSave(record)">保存</a>
              <a-divider type="vertical" />
              <a @click="handleCancel(record)">取消</a>
            </span>
          </template>
        </a-table>
        <a-input v-model="newTagKey" style="width: 200px; margin-right: 16px" placeholder="标签名称" />
        <a-input v-model="newTagValue" style="width: 200px; margin-right: 16px" placeholder="标签值" />

        <a-button @click="handleAddTags">添加标签</a-button>
      </div>
      <!-- <div class="versions">
        <h3>Versions</h3>
      </div> -->
    </div>
  </a-modal>
</template>

<script>
import { formatTime } from '../../../utils/util'
import { getModelDetail, setTags, setDesc } from '@/api/model'
export default {
  data() {
    return {
      title: '模型详情',
      visible: false,
      tags: [],
      name: '',
      creation_timestamp: '',
      last_updated_timestamp: '',
      description: '',
      columns: [
        {
          title: '名称',
          dataIndex: 'key',
          key: 'key',
        },
        {
          title: '标签值',
          dataIndex: 'value',
          key: 'value',
          scopedSlots: { customRender: 'value' },
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      newTagKey: '',
      newTagValue: '',
      isEditingDesc: false,
      editingDesc: '',
    }
  },
  methods: {
    showModal(record) {
      this.name = record.name
      this.handleModelDetail(this.name)
      this.visible = true
    },
    closeModal() {
      this.visible = false
    },
    handleModelDetail(name) {
      getModelDetail({
        name,
      }).then((res) => {
        const { registered_model } = res
        const tags = registered_model.tags || []
        this.tags = tags.map((item) => {
          return {
            ...item,
            isEditing: false,
            editValue: '',
          }
        })
        this.description = registered_model.description || ''
        this.creation_timestamp = formatTime(new Date(registered_model.creation_timestamp))
        this.last_updated_timestamp = formatTime(new Date(registered_model.last_updated_timestamp))
      })
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    handleAddTags() {
      this.handleSetTags(this.newTagKey, this.name, this.newTagValue)
      // 清空输入框的值
      this.newTagKey = ''
      this.newTagValue = ''
    },
    handleEdit(record) {
      record.isEditing = true
      record.editValue = record.value
    },
    handleSetTags(key, name, value) {
      setTags({
        key,
        name,
        value,
      }).then((res) => {
        this.handleModelDetail(name)
      })
    },
    handleSave(record) {
      record.value = record.editValue
      record.isEditing = false
      this.handleSetTags(record.key, this.name, record.value)
    },

    handleCancel(record) {
      record.isEditing = false
    },
    handleEditDesc() {
      this.isEditingDesc = true
      this.editingDesc = this.description
    },
    handleSaveDesc() {
      setDesc({
        name: this.name,
        description: this.editingDesc
      }).then(() => {
        this.isEditingDesc = false
        this.$message.success('描述更新成功')
        // 重新获取详情数据
        this.handleModelDetail(this.name)
      }).catch(() => {
        this.$message.error('描述更新失败')
      })
    },
    handleCancelDesc() {
      this.isEditingDesc = false
      this.editingDesc = ''
    },
  },
}
</script>

<style lang="less" scoped>
@import '../index.less';
.info_wrapper {
  margin-top: 16px;

  .description {
    margin-bottom: 16px;
  }

  .tags {
    margin-bottom: 16px;
  }

  .versions {
    margin-bottom: 16px;
  }
}
</style>
